<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">运单详情</a></el-breadcrumb-item>
        </el-breadcrumb>
        <br />
        <el-card>
            <div>
                <div class="GaoDeDiTu">
                    <el-card v-if="send_lng" class="aaaaa">
                        <h3>分布地图</h3>
                        <div>
                            <baidu-map :center="center" class="baidumap" :zoom="zoom" @ready="handler" @click="getClickInfo" :scroll-wheel-zoom='true'>
                            </baidu-map>
                        </div>
                    </el-card>
                </div>
                <!-- 运单详情卡片 -->
                <div class="BaoJingXinXi" v-if="send_lng">
                    <el-card style="height:600px">
                        <!-- 表格模版，渲染用户信息 -->
                        <el-table :data="OrderInfo" stripe border>
                            <el-table-column prop="ordername" label="运单号">
                            </el-table-column>
                            <el-table-column prop="tag_id" label="标签">
                            </el-table-column>
                            <el-table-column prop="temp_log" label="温度记录">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <a href="/take_goods">
                                        <el-button type="primary" size="mini" v-if="scope.row.cond != 2">请先收货</el-button>
                                    </a>
                                    <a :href="'/temp_log?oid=' + scope.row.id">
                                        <el-button type="primary" size="mini" @click="RequestTemp(scope.$index,scope.row)" v-if="scope.row.cond === 2">查看温度详情</el-button>
                                    </a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
// 导入曲线图包
import echarts from 'echarts'
import { order_address_get } from '../axios_api/api'
export default {
    data() {
        return {
            // 运单详情
            OrderInfo: [],
            // 运单id
            oid: '',
            // 这是高德地图变量
            send_lng: '',
            send_lat: '',
            take_lng: '',
            take_lat: '',
            // 百度地图
            center: { lng: 109.45744048529967, lat: 36.49771311230842 },
            zoom: 13,
        }
    },
    mounted() {
        this.oid = this.$route.query.oid
        this.get_address();
    },
    methods: {
        // 获取订单收发货地址经纬度
        get_address() {
            order_address_get(this.oid).then(resp => {
                if (resp.code === 200) {
                    console.log(resp)
                    this.send_lng = resp.send_lng
                    this.send_lat = resp.send_lat
                    this.take_lng = resp.take_lng
                    this.take_lat = resp.take_lat
                    this.OrderInfo = resp.orderlist
                }
            })
        },

        // 百度地图
        handler({ BMap, map }) {
            var point = new BMap.Point(this.send_lng, this.send_lat)
            var point2 = new BMap.Point(this.take_lng, this.take_lat)
            map.centerAndZoom(point, 6)
            map.centerAndZoom(point2, 6)
            var marker = new BMap.Marker(point) // 创建标注
            var marker2 = new BMap.Marker(point2) // 创建标注
            var polyline = new BMap.Polyline([
                new BMap.Point(this.send_lng, this.send_lat),
                new BMap.Point(this.take_lng, this.take_lat),
            ],
                { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 1 }
            ) // 创建连线
            map.addOverlay(marker) // 将标注添加到地图中
            map.addOverlay(marker2) // 将标注添加到地图中
            map.addOverlay(polyline) // 将标注添加到地图中
            var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
            map.addOverlay(circle)
        },
        // 百度地图
        getClickInfo(e) {
            console.log(e.point.lng)
            console.log(e.point.lat)
            this.center.lng = e.point.lng
            this.center.lat = e.point.lat
        },
    }
}
</script>

<style lang="scss" scoped>
.baidumap {
    height: 500px;
    width: 900px;
}
.selecttitle {
    font-size: 12px;
    margin: 20px 0 50px 0;
}
.el-cascader {
    width: 200px;
    margin-right: 30px;
}
.el-date-picker {
    width: 200px;
    margin-right: 30px;
}
.aaaaa {
    margin-bottom: 10px;
}
</style>